<template>
    <div class="title">生命周期及组合式中的钩子函数</div>
    <div class="unitBar inner">
        <span class="spanTest">页面显示的值：&nbsp;</span><span class="test">{{ numAccount }}</span>
        <button @click="addNumAccount">点击numAcount++</button>
        <button @click="showOrhidden">显示或隐藏</button>
        <Myvue v-if="flag"></Myvue>
    </div>
</template>
<script setup>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from 'vue';
import Myvue from '@/components/my.vue';
    components: { Myvue };
    let numAccount=ref(0);
    let flag=ref(true);
function addNumAccount() {
        numAccount.value++;
        };
function showOrhidden() {
            flag.value = !flag.value;
        }
onBeforeMount(()=>{
    // console.log('@numAccount',numAccount.value);//变量和函数已创建
    // console.log('@spanText',document.querySelector('span.test').innerHTML);//视图还未渲染
})
onMounted(()=>{
    // console.log('@numAccount',numAccount.value);
})
onBeforeUpdate(()=>{
    console.log('@numAccount',numAccount.value);
    console.log('@spanText',document.querySelector('span.test').innerHTML);//访问的还是旧的视图
})
onUpdated(()=>{
    // console.log('@numAccount',numAccount.value);
    // console.log('@spanText',document.querySelector('span.test').innerHTML);
})

</script>
<style scoped>


button {
    display: block;
    margin-top: 10px;
}
</style>